<script setup lang="ts">
import SchoolData from './component/schoolData.vue'
import AcademyData from './component/academyData.vue'
import subjectPredict from './component/subjectPredict.vue'
import ProblemData from './component/problemData.vue'
import NoticeData from './component/noticeData.vue'
import { ref, computed } from 'vue'

// 定义页面类型枚举
enum PageType {
	SCHOOL = 'school',
	ACADEMY = 'academy',
	PREDICT = 'predict',
	PROBLEM = 'problem',
	NOTICE = 'notice'
}

// 当前页面状态
const currentPage = ref<PageType>(PageType.ACADEMY)

// 使用计算属性确定当前要显示的组件
const currentComponent = computed(() => {
	// 使用对象映射替代嵌套的三元运算符
	const componentMap = {
		[PageType.SCHOOL]: SchoolData,
		[PageType.ACADEMY]: AcademyData,
		[PageType.PREDICT]: subjectPredict,
		[PageType.NOTICE]: NoticeData,
		[PageType.PROBLEM]: ProblemData
	}

	// 返回映射的组件，如果没找到则返回 Problem 组件作为默认值
	return componentMap[currentPage.value] || ProblemData
})

// 菜单项配置
const menuItems = [
	// { type: PageType.SCHOOL, label: '学校数据' },
	{ type: PageType.ACADEMY, label: '学院数据' },
	{ type: PageType.PREDICT, label: '科目统计' },
	{ type: PageType.NOTICE, label: '公告' },
	{ type: PageType.PROBLEM, label: '常见问题' }
] as const

// 切换页面
const switchPage = (page: PageType) => {
	currentPage.value = page
}
</script>

<template>
	<div class="home-container">
		<!-- 头部导航 -->
		<div class="fixed-header">
			<el-menu mode="horizontal" :ellipsis="false" :default-active="currentPage">
				<el-menu-item
					v-for="item in menuItems"
					:key="item.type"
					:index="item.type"
					@click="switchPage(item.type)"
				>
					{{ item.label }}
				</el-menu-item>
			</el-menu>
		</div>

		<!-- 内容区域 -->
		<div class="scrollable-main">
			<component :is="currentComponent" class="component-transition" />
		</div>
	</div>
</template>

<style lang="scss" scoped>
.home-container {
	height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.fixed-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		background-color: white;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		:deep(.el-menu) {
			border-bottom: none;

			.el-menu-item {
				&.is-active {
					color: var(--el-menu-active-color);
					border-bottom: 2px solid var(--el-menu-active-color);
				}

				&:hover {
					background-color: var(--el-menu-hover-bg-color);
				}
			}
		}
	}

	.scrollable-main {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 20px;
		height: calc(100vh - 60px);
		box-sizing: border-box;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: #dcdfe6;
			border-radius: 3px;
		}

		&::-webkit-scrollbar-track {
			background-color: #f5f7fa;
		}

		.component-transition {
			transition: opacity 0.3s ease;

			&-enter-from,
			&-leave-to {
				opacity: 0;
			}

			&-enter-to,
			&-leave-from {
				opacity: 1;
			}
		}
	}
}
</style>
